<template>
  <div id="Editoutsourcing">
    <div class="Editoutsourcing">
      <div class="headerLeft">出库单</div>
      <div class="headerRight">
        <div class="Btn">
          <el-button type="primary" @click="save">{{
            id == 0 ? "新增" : "保存"
          }}</el-button>
          <el-button @click="cancel">{{
            id == 0 ? "编辑" : id == 1 ? "取消" : "撤回"
          }}</el-button>
          <el-button
            type="success"
            plain
            :disabled="id == 2 ? false : true"
            @click="examine"
            >审核</el-button
          >
          <el-button type="info" plain :disabled="id == 2 ? false : true"
            >反审核</el-button
          >
          <el-button type="success" icon="el-icon-printer" plain v-if="id == 0"
            >打印</el-button
          >
          <el-dropdown v-if="id != 1">
            <el-button type="primary">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>挂起</el-dropdown-item>
              <el-dropdown-item>关闭</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="retract" @click="hide">收起</div>
      </div>
    </div>
    <!-- 中间内容 -->
    <div class="middleContent" v-if="state == true">
      <div class="listBox">
        <div class="inputBox">
          <span>单据编码：</span>
          <div class="textBox">
            <el-input placeholder="" v-model="documentInput" disabled>
            </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>单据日期：</span>
          <div class="textBox">
            <el-date-picker
              v-model="documentTime"
              type="date"
              placeholder="选择日期"
              :disabled="id == 0"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="inputBox">
          <span>单据状态：</span>
          <div class="textBox">
            <el-input v-model="documentStatus" disabled> </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>单据类型：</span>
          <div class="textBox">
            <el-select v-model="businesStatus" disabled placeholder="出库单">
              <el-option
                v-for="(item, index) in StatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="listBox">
        <div class="inputBox">
          <span>业务类型：</span>
          <div class="textBox">
            <el-select v-model="businessType" disabled placeholder="委外出库">
              <el-option
                v-for="(item, index) in BusinessOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="inputBox">
          <span>业务状态：</span>
          <div class="textBox">
            <el-select
              v-model="StateValue"
              :disabled="id == 0"
              placeholder="正常"
            >
              <el-option
                v-for="(item, index) in StateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="inputBox">
          <span>业务部门：</span>
          <div class="textBox">
            <el-cascader
              v-model="value"
              :options="deptOptions"
              @change="handleChange"
              :disabled="id == 0"
            ></el-cascader>
          </div>
        </div>
        <div class="inputBox">
          <span>业务人员：</span>
          <div class="textBox">
            <el-select v-model="BusinessPen" :disabled="value == ''">
              <el-option
                v-for="(item, index) in BusinessPenOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="listBox">
        <div class="inputBox">
          <span>操作员：</span>
          <div class="textBox">
            <el-input type="text" placeholder="njrsun" clearable disabled />
          </div>
        </div>
        <div class="inputBox">
          <span>审核员：</span>
          <div class="textBox">
            <el-input placeholder="" v-model="customer" disabled clearable>
            </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>审核日期：</span>
          <div class="textBox">
            <el-date-picker
              v-model="ApprovedDate"
              type="date"
              placeholder="选择日期"
              disabled
            >
            </el-date-picker>
          </div>
        </div>
        <div class="inputBox">
          <span>期间：</span>
          <div class="textBox">
            <el-date-picker
              v-model="deliveryDate"
              type="date"
              placeholder="请选择日期"
              :disabled="id == 0"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="listBox">
        <div class="inputBox">
          <span>仓库：</span>
          <div class="textBox">
            <el-select
              v-model="selectValue"
              @change="selectValue"
              clearable
              placeholder="请选择"
              disabled
            >
              <el-option
                v-for="(item, index) in StoreOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="inputBox">
          <span>出货单号：</span>
          <div class="textBox">
            <el-input v-model="tel" :disabled="id == 0 || id == 1"> </el-input>
          </div>
        </div>
        <div class="inputBox">
          <span>外协厂家：</span>
          <div class="textBox">
            <div class="textBoxFlex">
              <el-input v-model="address" :disabled="id == 0 || id == 1">
              </el-input>
              <span v-if="id != 0 && id != 1" class="textBoxFlexSelect"
                >选择</span
              >
            </div>
          </div>
        </div>
        <div class="inputBox">
          <span>备注信息：</span>
          <div class="textBox">
            <el-input
              type="textarea"
              :rows="1"
              v-model="notes"
              :disabled="id == 0"
            >
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="materailBox">
      <div class="materailHead">
        <div class="name">物料信息</div>
        <div>
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            @click="addMaterial"
            v-if="id != 0"
            >新增物料</el-button
          >
        </div>
      </div>
      <div class="tab">
        <AddoutsourcingTable :headData="headData" :tableData="tableData">
          <template v-slot:invCode="{ row }">
            <div class="materialCode" :class="row.invCode == '' ? 'color' : ''">
              <div>{{ row.invCode }}</div>
              <div
                @click="materialCodeSelect()"
                class="materialCodeSelect"
                v-if="id != 0"
              >
                选择
              </div>
            </div>
          </template>
          <template v-slot:quantity="{ row }">
            <div class="Number">
              <el-input
                :class="
                  row.Number == '' && row.NumberState == true
                    ? 'NumberColor'
                    : ''
                "
                v-model="row.quantity"
                placeholder=""
                @change="change(row.quantity)"
              ></el-input>
            </div>
          </template>
          <template v-slot:location="{ row }">
            <div class="location">
              <div>{{ row.location }}</div>
              <div @click="locationSelect(row)" v-if="id != 0">选择</div>
            </div>
          </template>
          <template v-slot:operation="{ row }">
            <div class="deleteColor" @click="deleteData(row)" v-if="id != 0">
              删除
            </div>
          </template>
        </AddoutsourcingTable>
      </div>
    </div>
    <div class="dialogFrom">
      <dialogFrom
        :dialogVisible="dialogVisible"
        :dialogFromtitle="dialogFromtitle"
        :dialogFromNum="dialogFromNum"
        @dialog="dialog"
        :headData="headData"
        @dialogFrom="dialogFrom"
        @LocationName="LocationName"
      ></dialogFrom>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import url from "@/api/axios";
import headData from "@/menuList/headData.json";
import AddoutsourcingTable from "@/ComponentsTable/AddoutsourcingTable";
import dialogFrom from "@/ComponentsTable/dialogFrom";
import Addoutsourcing from "@/menuList/Addoutsourcing.json";
export default {
  name: "Editoutsourcing",
  components: {
    AddoutsourcingTable,
    dialogFrom,
  },
  data() {
    return {
      materialCode: "",
      BusinessPen: "",
      status: 0,
      dialogFromNum: 0,
      dialogFromtitle: "",
      index: 0,
      location: 0,
      id: 0, //0  查看，1  新增，2   编辑
      state: true,
      tableData: [],
      oldtableDataLength: 0,
      newtableDataLength: 0,
      documentInput: "",
      documentTime: "",
      ApprovedDate: "",
      documentStatus: "开立",
      businesStatus: 1,
      businessType: "",
      operator: "",
      Auditor: "",
      auditDate: "",
      store: "",
      customer: "",
      deliveryDate: "",
      consignee: "",
      tel: "",
      address: "",
      notes: "",
      business: "",
      store: "",
      StateValue: "1",
      selectValue: "1",
      value: "",
      dialogVisible: false,
      StateOptions: [],
      StatusOptions: [],
      BusinessOptions: [],
      deptOptions: [],
      StoreOptions: [],
      BusinessPenOptions: [],
      headData: [],
      tableData: [],
    };
  },
  methods: {
    hide() {
      let _self = this;
      //收起
      _self.state = !_self.state;
    },
    handleChange() {},
    addMaterial() {
      let data = {
        index: this.index++,
        Serial: "",
        SalesOrder: "",
        materialCode: "",
        materialCodeState: false,
        materialName: "",
        invAttribute: "",
        unitName: "",
        Number: "",
        NumberState: false,
        ShipmentQuantity: "",
        packagesNumber: "",
        location: "",
        notes: "",
      };
      this.tableData.push(data);
      this.newtableDataLength = this.tableData.length;
    },
    materialCodeSelect() {
      this.dialogVisible = true;
      this.dialogFromtitle = "选择物料";
      this.dialogFromNum = 0;
    },
    locationSelect(row) {
      console.log(row);
      this.materialCode = row.materialCode;
      this.dialogVisible = true;
      this.dialogFromtitle = "选择货位";
      this.dialogFromNum = 1;
    },
    dialog(value) {
      this.dialogVisible = value;
    },
    cancel() {
      if (this.id == 0) {
        this.id = 2;
      } else if (this.id == 2) {
        this.id = 0;
      } else if (this.id == 1) {
        this.$router.push({
          name: "outsourcing",
        });
      }
    },
    save() {
      if (this.id == 2) {
        let type = false;
        for (let i in this.tableData) {
          if (this.tableData[i].materialCode == "") {
            this.$set(this.tableData[i], "materialCodeState", true);
            return false;
          }
        }
        if (this.newtableDataLength > this.oldtableDataLength) {
          this.$message({
            message: "物料明细只能全部引用或者全部新增",
            type: "error",
          });
        } else {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.id = 0;
        }
      } else if (this.id == 1) {
        if (this.tableData.length == 0) {
          this.$message({
            message: "物料信息不能为空",
            type: "error",
          });
        } else if (this.tableData.length != 0) {
          console.log("iodhf");
          let type = false;
          for (let i in this.tableData) {
            if (this.tableData[i].materialCode == "") {
              console.log("kfj");
              type = true;
              this.$set(this.tableData[i], "materialCodeState", true);
            }
            if (this.tableData[i].Number == "") {
              console.log("sdkhtfeuiohfeuiw");
              type = true;
              this.$set(this.tableData[i], "NumberState", true);
            }
          }
          if (!type) {
            this.$message({
              message: "添加成功！",
              type: "success",
            });
            this.id = 0;
          }
        }
      } else if (this.id == 0) {
        this.id = 1;
        this.documentTime = "";
        this.value = "";
        this.BusinessPen = "";
        this.notes = "";
        this.tableData = [];
      }
    },
    dialogFrom(data) {
      this.dialogVisible = data.dialogVisible;
      console.log(data);
      this.exist = 0;
      for (let i in this.tableData) {
        if (this.tableData[i].materialCode == "") {
          this.tableData.splice(i, 1);
        }
      }
      this.tableData.push({
        Serial: "",
        SalesOrder: "",
        materialCode: data.row.materialCode,
        materialName: data.row.materialName,
        invAttribute: data.row.invAttribute,
        unitName: data.row.unitName,
        Number: "",
        ShipmentQuantity: "",
        packagesNumber: "",
        location: "",
        notes: "",
      });
      console.log(this.tableData);
    },
    deleteData(row) {
      console.log(row);
      for (let i in this.tableData) {
        if (this.tableData[i].index == row.index) {
          this.tableData.splice(i, 1);
          console.log(i);
        }
      }
      this.newtableDataLength = this.tableData.length;
    },
    LocationName(value) {
      console.log(value);
      this.dialogVisible = value.dialogVisible;
      for (let i in this.tableData) {
        if (this.tableData[i].materialCode == this.materialCode) {
          this.tableData[i].location = value.LocationName;
        }
      }
    },
    change(Number) {
      console.log(Number);
      let retNum = /^\d*$/;
      if (!retNum.test(Number)) {
        this.$message({
          message: "必须为数字",
          type: "warning",
        });
        Number = "";
      }
    },
    examine() {
      console.log(this.tableData);
      if (this.tableData[0].params.sisName != "开立") {
        this.$message({
          message: "单据状态必须为审核",
          type: "error",
        });
      } else if (this.tableData[0].params.sisName == "开立") {
        this.tableData[0].params.sisName = "审核";
        this.documentStatus = "审核";
        this.$message({
          message: "审核成功！",
          type: "success",
        });
        axios
          .get(`${url}/examineGetDetail`, {
            params: {
              id: this.tableData[0].id,
              sisName: this.tableData[0].params.sisName,
            },
          })
          .then((res) => {
            console.log(res);
          });
      }
    },
  },
  created() {
    console.log("初始状态值id：" + this.$store.state.id);
    // *********************下拉列表********************
    this.StateOptions = Addoutsourcing.StateOptions;
    this.StatusOptions = Addoutsourcing.StatusOptions;
    this.BusinessOptions = Addoutsourcing.BusinessOptions;
    this.deptOptions = Addoutsourcing.deptOptions;
    this.StoreOptions = Addoutsourcing.StoreOptions;
    this.BusinessPenOptions = Addoutsourcing.BusinessPenOptions;
    //  ************************************************
    this.headData = headData.EditoutsourcingHeadData;
    this.id = this.$route.params.id;
    if (this.id != undefined) {
      this.$store.commit("setId", this.id);
    }
    this.id = this.$store.state.id;

    if (this.id == 2) {
      console.log("初始数组内容：***************");
      console.log(this.$store.state.tableData);
      if (Object.keys(this.$route.params).length != 0) {
        this.tableData.push(this.$route.params.rowData);
        this.oldtableDataLength = this.tableData.length;
        this.$store.commit("setTableData", this.tableData);
      }
      this.tableData = this.$store.state.tableData;
      this.documentInput = this.tableData[0].wmCode;
      this.documentTime = this.tableData[0].invoiceDate;
      this.documentStatus = this.tableData[0].params.sisName;
      this.businesStatus = this.tableData[0].params.iTName;
      this.StateValue = this.tableData[0].params.swsName;
      this.value = this.tableData[0].workDept;
      this.selectValue = this.tableData[0].params.wHName;
      this.BusinessPen = this.tableData[0].workStaff;
      console.log("更新后数组内容：*****************");
      console.log(this.$store.state.tableData);
    }
  },
  mounted() {
    let time = new Date();
    let year = time.getFullYear();
    let month = time.getMonth() + 1;
    let day = time.getDate();
    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    let getTime = year + "-" + month + "-" + day;
    // if (this.$route.params != {}) {
    //   if (this.$route.params.id == 2) {
    //     this.documentTime = this.id
    //       ? getTime
    //       : this.$route.params.rowData.DocumentDate;
    //     this.deliveryDate = this.$route.params.rowData.period;
    //     this.documentInput = this.$route.params.rowData.DocumentCode;
    //   }
    // }
  },
};
</script>
  <style  scoped>
.Editoutsourcing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid lightgray;
  padding-bottom: 10px;
}
.headerLeft {
  font-size: 18px;
}
.headerRight {
  display: flex;
  align-items: center;
}

.retract {
  margin-left: 10px;
  color: rgb(43, 65, 189);
  font-size: 14px;
  cursor: pointer;
}
.inputBox {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.middleContent {
  display: flex;
  /* justify-content: space-between; */
}
.listBox {
  margin-right: 20px;
}
.listBox .inputBox span {
  width: 70px;
  font-size: 14px;
}

.materailBox {
  margin-top: 10px;
}
.materailHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 60px;
  border-bottom: 1px solid lightgray;
}
.materailHead .name {
  font-size: 22px;
}
.tab .deleteColor {
  color: red;
  cursor: pointer;
}
.tab .materialCode {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.tab .color {
  border: 1px solid red;
}
.tab .materialCode div {
  padding: 5px 3px;
}
.tab .materialCode .materialCodeSelect {
  color: red;
  cursor: pointer;
}
.tab .location {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.tab .location div {
  padding: 5px 3px;
}
.tab .location div:last-child {
  color: red;
  cursor: pointer;
}
.textBoxFlex {
  display: flex;
  align-items: center;
}
.textBoxFlex .textBoxFlexSelect {
  cursor: pointer;
  color: blue;
}
.tab .NumberColor {
  border: 1px solid red;
}
</style>
<style>
.middleContent .listBox .el-input__inner {
  width: 210px;
  height: 36px;
  line-height: 36px;
}
.headerRight .el-button {
  height: 36px;
  line-height: 36px;
  padding: 0 18px;
}
.tab .el-table .cell {
  padding: 0;
}
.tab .Number .el-input__inner {
  padding: 0 5px;
  text-align: right;
  border: none;
  border-radius: 0;
}
</style>